<template>
   <div class="xiada">
     <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item>首页</el-breadcrumb-item>
         <el-breadcrumb-item>项目审批</el-breadcrumb-item>
         <el-breadcrumb-item>项目可研评审</el-breadcrumb-item>
       </el-breadcrumb>
     </div>

     <div class="head">
       <h3 class="title"></h3>
       <ul class="tag">
         <li>
           <span>规划编号：</span>
           <i></i>
         </li>
         <li>
           <span>创建人：</span>
           <i></i>
         </li>
         <li>
           <span>创建时间：</span>
           <i></i>
         </li>
       </ul>
     </div>

     <div class="basicInfo">
       <h3 class="title">
         <i></i>
         基本信息
       </h3>
       <el-row>
         <el-col :span="12">
           <label>项目编码</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>建设单位</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>项目概算</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>资金来源</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>项目类型</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>计划开始时间</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>计划结束时间</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>项目联系人</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>项目联系人电话</label>
           <span></span>
         </el-col>
         <el-col :span="24">
           <label class="other">附件</label>
           <!-- <span>软件工程</span> -->
         </el-col>
         <el-col :span="24">
           <label class="other">建设内容</label>
           <span>建设内容</span>
         </el-col>
       </el-row>
     </div>

     <div class="basicInfo">
       <h3 class="title">
         <i></i>
         联合评审意见
       </h3>
       <el-row>
         <el-col :span="12">
           <label>联合评审时间</label>
           <span></span>
         </el-col>
         <el-col :span="12">
           <label>评审结果</label>
           <span></span>
         </el-col>
         <el-col :span="24">
           <label class="other">附件</label>
           <!-- <span>软件工程</span> -->
         </el-col>
         <el-col :span="24">
           <label class="other">联合评审意见：</label>
           <span></span>
         </el-col>
       </el-row>
     </div>

     <div class="addContainer">
       <h3 class="title">
         <i></i>
         批复意见
       </h3>

       <el-form
         ref="ruleForm"
         label-width="150px"
         class="addForm">
         <el-row>
           <el-col :span="12">
             <el-form-item label="批复时间" prop="projectName">
               <el-date-picker
                 align="right"
                 type="date"
                 placeholder="请选择批复时间"
                 value-format="yyyy-MM-dd"
               ></el-date-picker>
             </el-form-item>
           </el-col>

           <el-col :span="12">
             <el-form-item label="批复结果" prop="projectName">
               <el-select>
                 <el-option value="1" label="通过"></el-option>
                 <el-option value="2" label="不通过"></el-option>
               </el-select>
             </el-form-item>
           </el-col>

           <el-col :span="24" class="fileList">
             <el-form-item label="上传附件" prop="name">
               <el-upload
                 :data="{fileType: 22}"
                 name="multipartFiles"
                 class="upload-demo"
                 :limit="1"
               >
                 <div class="uploadContent">
                   <div class="uploadBox">
                     <i class="el-icon-plus"></i>
                     <span>上传附件</span>
                   </div>
                   <div
                     slot="tip"
                     class="el-upload__tip"
                   >只能上传jpg/png/word/pdf/zip/excle/ppt格式文件，文件不能超过50MB</div>
                 </div>
               </el-upload>
             </el-form-item>
           </el-col>

           <el-col :span="24" class="fileList">
             <el-form-item label="批复意见">
               <el-input
                 :rows="5"
                 resize="none"
                 type="textarea"
                 placeholder="请输入批复意见"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div class="operateBtn">
         <el-button plain>取消</el-button>
         <el-button type="primary" >提交</el-button>
       </div>
     </div>

     <div class="remark">
       <p>备注：</p>
       <p>总投资500万元（不含）以下的项目，资料预审、项目审批各不超过10个工作日；</p>
       <p>总投资500万元以上的项目，资料预审、项目审批各不超过15个工作日</p>
     </div>

     <el-tabs type="border-card">
       <el-tab-pane label="工单处理"></el-tab-pane>
       <el-tab-pane label="流程图">
       </el-tab-pane>
       <el-tab-pane label="操作动态">
       </el-tab-pane>
     </el-tabs>

   </div>
</template>

<script>
    export default {
        name: "xiada"
    }
</script>

<style scoped lang="less">
  .xiada {
    .head {
      margin: 20px 0;
      padding: 20px;
      background-color: #fff;
      .title {
        font-size: 24px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
      .tag {
        display: flex;
        color: #999;
        margin-top: 10px;
        i {
          font-style: initial;
          color: #333;
        }
        li {
          margin-right: 40px;
        }
      }
    }

    .basicInfo {
      padding: 20px;
      background-color: #fff;
      .title {
        font-size: 18px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        i {
          width: 4px;
          height: 16px;
          display: inline-block;
          background-color: #4967cf;
          margin-right: 6px;
        }
      }
      .el-row {
        border: 1px solid rgba(238, 238, 238, 1);
        border-bottom: none;
        .el-col {
          border-bottom: 1px solid rgba(238, 238, 238, 1);
        }
      }

      label {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        width: 150px;
        background-color: #fafafa;
        text-align: right;
        padding-right: 14px;
        color: #999999;
      }
      .other {
        height: 80px;
      }
      span {
        height: 40px;
        padding-left: 15px;
        color: #333;
      }
    }

    .addContainer {
      margin-top: 20px;
      padding: 20px;
      background-color: #fff;

      .addForm {
        .el-row {
          border: 1px solid rgba(238, 238, 238, 1);
          border-bottom: none;
          .el-col {
            border-bottom: 1px solid rgba(238, 238, 238, 1);
          }
        }
        .el-select,
        .el-input {
          width: 100%;
        }
      }

      .title {
        font-size: 18px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        i {
          width: 4px;
          height: 16px;
          display: inline-block;
          background-color: #4967cf;
          margin-right: 6px;
        }
      }
    }

    .fileList {
      .uploadContent {
        display: flex;
      }
      .uploadBox {
        width: 114px;
        height: 58px;
        border-radius: 4px;
        border: 2px dashed rgba(160, 179, 244, 1);
        display: flex;
        flex-direction: column;
        margin-right: 10px;
        .el-icon-plus {
          font-size: 26px;
          color: #4967cf;
          font-weight: 900;
        }
      }
      .upload-demo {
        padding: 11px 16px;
        width: 600px;
      }
    }

    .operateBtn {
      text-align: center;
      padding-top: 30px;
      .el-button--small {
        padding: 9px 30px;
      }
    }

    .remark {
      margin: 20px 0;
      padding: 20px;
      background-color: #fff;
    }
  }
</style>
<style lang="less">
  .addForm {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-input {
      height: 40px;
      line-height: 40px;
    }
    .el-input__inner,
    .el-textarea__inner {
      border: none !important;
    }
    .el-form-item__label {
      background-color: #fafafa !important;
      min-height: 40px;
      line-height: 40px;
    }
    .fileList {
      .el-form-item__label {
        min-height: 120px;
      }
    }
    .el-form-item__error {
      display: none;
    }
  }
</style>
